<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>起步</title>
    <script type="text/javascript" src="../assets/vue-2.2.2.js"></script>
    <style>
        .title {
            background: green;
            font-size: 20px;
            width: 80%;
            border-radius: 5px;
            margin: 3px;
        }

        .red{
            color:red;
        }

        .blue{
            color:blue;
        }

        .font30{
            font-size: 30px;
        }
    </style>
</head>

<body>
    <!-------------------------------------------------------------------------------->
    <h4 class="title">1.数据动态绑定更新</h4>
    <div id="app1">
        <span :title="dateStr">
            鼠标悬停几秒钟查看此处动态绑定的提示信息！
        </span>
    </div>
    <script>
        new Vue({
            el: '#app1',
            data: {
                dateStr: '页面加载于 ' + new Date().toLocaleString()
            }
        })
    </script>
    <hr>
    <!-------------------------------------------------------------------------------->
    <h4 class="title">2.数据随时间更新</h4>
    <div id="app2">
        <span>
            当前时间：{{nowTime}}
        </span>
    </div>
    <script>
        var vm1 = new Vue({
            el: '#app2',
            data: {
                nowTime: new Date()
            },
            //vue实例挂载的时候执行
            mounted() {
                var _this = this;
                this.timer = setInterval(function () {
                    _this.nowTime = new Date();
                }, 1000);
            },
            //vue实例销毁前的执行
            beforeDestroy() {
                if (this.timer) {
                    clearInterval(this.timer);
                }
            },
        })
    </script>
    <hr>
    <!-------------------------------------------------------------------------------->
    <h4 class="title">3.输出html代码</h4>
    <div id="app3" v-html="myhtml">
        {{myhtml}}
    </div>
    <script>
        var vm2 = new Vue({
            el: '#app3',
            data: {
                myhtml: "<span style='color:red;'>hello world</span>"
            },
        })
    </script>
    <hr>
    <!-------------------------------------------------------------------------------->
    <h4 class="title">4.过滤器，可以用来插值输出的值进行格式化</h4>
    <span>例子说明：将字符串”abcd"输出时通过过滤器格式化为'a-b-c-d" ,然后结果在通过filter转换为'a+b+c+d'，再拼接参数e+f+g</span>
    <div id="app4">
        {{myChar | myFilter1 | myFilter2 | myFilter3('+e+f+g')}}
    </div>
    <script>
        var vm4 = new Vue({
            el: '#app4',
            data: {
                myChar: "abcd"
            },
            filters: {
                myFilter1: function (value) {
                    var result = "";
                    for(var i = 0 ; i < value.length;i++){
                        if(i != 0){
                            result += "-";
                        }
                        result += value[i];
                    }
                    return result;
                },
                myFilter2: function (value) {
                    return value.replace(/-/g,"+");
                },
                //带参数的过滤器
                myFilter3:function(value,arg){
                    return value + arg;
                }
            }
        })
    </script>
    <hr>
    <!-------------------------------------------------------------------------------->
    <h4 class="title">5.常用指令v:on(@)/v:bind(:)/v:model/v-show/v-if</h4>
    <span></span>
    <div id="app5">
        <div>数值：{{count}}</div>
        <!-- 绑定一个原生点击事件 -->
        <button @click="inc">click me</button><br />
        <span>演示一个v-mode数据视图双向绑定</span>
        <div>
            <input type="text" v-model="ipnutData">
            {{ipnutData}}
        </div>
        <br />
        <div>
            <div v-if="show" style="width:50px;height:50px;background: blue;"></div>
            <button @click="changeDisplay">显示/隐藏</button>
        </div>
    </div>
    <script>
        var vm5 = new Vue({
            el: '#app5',
            data: {
                count: 0,
                ipnutData: '',
                show: true
            },
            methods: {
                inc: function () {
                    this.count++;
                },
                changeDisplay: function () {
                    this.show = !this.show;
                }
            },
        })
    </script>
    <hr>

    <!-------------------------------------------------------------------------------->
    <h4 class="title">6.计算属性</h4>
    <div id="app6">
        {{responseText}}
    </div>
    <script>
        var vm6 = new Vue({
            el: '#app6',
            data: {
                text: '123,456'
            },
            computed: {
                responseText: function () {
                    return this.text.split(",").reverse().join(",");
                }
            }
        })
    </script>
    <hr>

    <!-------------------------------------------------------------------------------->
    <h4 class="title">7.绑定class</h4>
    <div id="app7">
        <span :class="{'red':red,'font30':activeFont}">我是吴渣渣</span>
        <!-- 数组形式-->
        <span :class="[blueColor,font30Size]">我是吴渣渣1</span>
        <span :class="classes">我是吴渣渣2</span>

    </div>
    <script>
        var vm7 = new Vue({
            el: '#app7',
            data: {
                red: true,
                activeFont: true,
                blueColor: 'blue',
                font30Size: 'font30',
                size: 'large',
                disabled: true
            },
            computed: {
                classes: function () {
                    return [
                        'btn',
                        {
                            ['btn-' + this.size]: this.size !== '',
                            ['btn-disabled']: this.disabled
                        }
                    ]
                }
            }
        })
    </script>
    <hr>

    <!-------------------------------------------------------------------------------->
    <h4 class="title">8.绑定内联样式</h4>
    <div id="app8">
        <span :style="{'color': color,'fontSize': fontSize +'px'}">我是吴渣渣</span>
        <span :style="styles">我是吴渣渣</span>
    </div>

    <script>
        var vm8 = new Vue({
            el: '#app8',
            data: {
                color: 'red',
                fontSize: 30,
                styles: {
                    color: 'blue',
                    fontSize: 20 + 'px',
                }
            }
        })
    </script>
    <hr>
    <!-------------------------------------------------------------------------------->

    <h4 class="title">9.v-cloak和v-once两个不需要指令</h4>
    <hr>
    <!-------------------------------------------------------------------------------->

    <h4 class="title">10.v-if和v-else-if、v-else条件判断语句,一次判断多个元素，可以使用vue内置的template标签</h4>
    <hr>
    <!-------------------------------------------------------------------------------->

    <h4 class="title">11.v-if和v-show的选择、vue会尽量复用dom，当多个相同的标签被复用，可以使用key属性，解除复用</h4>
    <hr>

    <!-------------------------------------------------------------------------------->
    <h4 class="title">12.v-for列表渲染</h4>
    <div id="app12">
        <table>
            <tbody>
                <!-- <tr v-for="(item,index) in books"> -->
                <!-- <tr v-for="(item,index) of books"> -->
                <template v-for="(item,index) of books">
                    <tr>
                        <td>{{index}}-{{item.name}}</td>
                    </tr>
                </template>
            </tbody>
        </table>
    </div>

    <script>
        var vm12 = new Vue({
            el: '#app12',
            data: {
                books: [{
                        name: 'vue实战1'
                    },
                    {
                        name: 'vue实战2'
                    },
                    {
                        name: 'vue实战3'
                    },
                ]
            }
        })
    </script>
    <hr>

    <!-------------------------------------------------------------------------------->
    <h4 class="title">13.数组更新</h4>
    <span>说明：vue的核心是数据和视图的双向绑定，当我们修改数组时候，vue会检测到数据发生变化，所以用v-for渲染视图也会马上更新，
        vue包含一组观察数组变异的方法，使得改变数组也会触发视图更新
        push/pop/shift/unshift/splice/sort/reverse,而使用filter/concat/slice是不会改变原数组的，
        使用Vue.set()和app.$set()也可以更新数据
    </span>
    <div id="app13">
        <template v-for="(item,index) of books">
            <tr>
                <td>{{index}}-{{item.name}}</td>
            </tr>
        </template>
    </div>

    <script>
        var vm13 = new Vue({
            el: '#app13',
            data: {
                books: [{
                        name: 'vue实战1'
                    },
                    {
                        name: 'vue实战2'
                    },
                    {
                        name: 'vue实战3'
                    },
                ]
            }
        })
        vm13.books = vm13.books.filter(function (item) {
            return item.name.match(/3/);
        });
        vm13.$set(vm13.books, 0, {
            name: 'vue实战4'
        })
    </script>
    <hr>
    <!-------------------------------------------------------------------------------->
    <h4 class="title">14.数组的过滤和排序，可以通过计算属性返回一个排序或过滤后的副本数组</h4>
    <hr>
    <!-------------------------------------------------------------------------------->
    <h4 class="title">15.方法与事件</h4>
    <hr>
    <!-------------------------------------------------------------------------------->
    <h4 class="title">16.v-model和表单空间的绑定</h4>
    <hr>
</body>

</html>